<template>
    <div class="HeaderTag">
        <el-tag
            v-for="tag,index in temporarMenuTag"
            :index="index"
            :key="tag.name"
            :closable="tag.path !== '/main' ? true : false"
            size="small"
            :effect="tag.path == $route.path ? 'dark' : 'light'"
            @click="handleOpenTag(tag)"
            @close="handleShutTag(tag,index)"
            >
            {{tag.label}}
        </el-tag>
    </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
export default {
    name:'HeaderTag',
    data() {
        return {
            
        }
    },
    computed:{
        ...mapState('Menu',['isCollapse','menuData','tempMenuPositon']),
        ...mapState('HeaderTag',['temporarMenuTag']),
    },
    methods: {
        ...mapMutations('Menu',['EidtIsCollapse','EidtDrawer',]),
        ...mapMutations('HeaderTag',['delMenuTag','coordinationEditCrumbs','setReserveCrumbs']),
        /**
         * 点击Tag跳转,修改面包屑，修改Menu默认位置指向
         */
        handleOpenTag(val)
        {
            sessionStorage.setItem("MenuPositon", val.position)
            //有bug,position数据出不来
            if(val.path === '/main')
            {
                sessionStorage.setItem("MenuPositon","1")
            }
            if(val.path !== this.$route.path)
                this.$router.push(val.path)
            this.handleEditCrumbs(this.menuData)
        },
        /**
         * 点击Tag关闭,,修改面包屑，修改Menu默认位置指向
         */
        handleShutTag(item,val)
        {
            this.delMenuTag([item.path,val])
            if(item.path === this.$route.path)
            {
                if(val <= this.temporarMenuTag.length - 1)
                {
                    this.$router.push(this.temporarMenuTag[val].path)
                    sessionStorage.setItem("MenuPositon", this.temporarMenuTag[val].position)
                }
                else
                {
                    this.$router.push(this.temporarMenuTag[val - 1].path)
                    sessionStorage.setItem("MenuPositon", this.temporarMenuTag[val - 1].position)
                }
                    
            }
            this.handleEditCrumbs(this.menuData) //修改面包屑
            this.reserveCrumbs() //改Tags
            
            // 判断Tags数量，最后给到main
            if(this.temporarMenuTag.length - 1 === 0)
            {
                let mainPosition = '1'
                sessionStorage.setItem("MenuPositon", mainPosition)
            }
        },
        /**
         * 补助面包屑的修改
         */
        handleEditCrumbs(val)
        {
            this.coordinationEditCrumbs([this.$route.path,val])
        },
        /**
         * 页面刷新后面包屑的保留
         */
        reserveCrumbs()
        {
            sessionStorage.setItem("MenuTag",JSON.stringify(this.temporarMenuTag))
        }
    },
    created() 
    {
        this.setReserveCrumbs()
    },
}
</script>

<style lang="less" scoped>
    .HeaderTag
    {
        padding: 6px;
        padding-left: 0;
        .el-tag:nth-child(n+1)
        {
            margin-left: 10px;
        }
    }

    @media all and (max-width: 540px)
    {
        .HeaderTag
        {
            display: none;
        }
    }
</style>